export default function init(canvasDom: any, context: CanvasRenderingContext2D) {
     
    let circleArr:iCircle[] = []
    let timer:any
    let point:number = 8

    // 取画布的高宽来设置显示分辨率
    const docWidth = canvasDom.value.offsetWidth
    const docHeight = canvasDom.value.offsetHeight
    

    // 设置画布分辨率
    canvasDom.value.width = docWidth
    canvasDom.value.height = docHeight


    // 设置线条和星星颜色
    context.strokeStyle = 'rgba(45,140,210,0.2)';
    context.lineWidth = 1;
    context.fillStyle = 'rgba(45,140,210,0.1)';

    interface iCircle {
        x: number,
        y: number,
        r: number,
        moveX: number,
        moveY: number, 
      }

    /** * 生成min和max之间随机数 */
    function rangeRadom(max:number, min:number) {
        return Math.floor(Math.random() * (max - min + 1) + min)
    }

    /** * 绘制原点 */
    function drawCircle(x:number, y:number, r:number, moveX:number, moveY:number) {
        let circle:iCircle = {
            x,
            y,
            r,
            moveX,
            moveY,
        }
        context.beginPath()
        context.arc(circle.x, circle.y, circle.r, 0, 2 * Math.PI)
        context.closePath()
        context.fill()
        return circle
    }

    /** * 绘制线条 */
    // function drawLine(beginX:number, beginY:number, closeX:number, closeY:number, opacity:number) {
    //     context.beginPath()
    //     context.strokeStyle = `rgba(0, 0, 0, ${opacity})`
    //     context.moveTo(beginX, beginY)
    //     context.lineTo(closeX, closeY)
    //     context.closePath()
    //     context.stroke()
    // }

    /** * 生成圆点数组 */
    function createCircleArr() {
        for (let i = 0; i < point; i++) {
            circleArr.push(drawCircle(
                rangeRadom(docWidth, 0),
                rangeRadom(docHeight, 0),
                rangeRadom(45, 30),
                rangeRadom(10, -10) / 40,
                rangeRadom(10, -10) / 40
            ))
        }
    }

    /** * 每一帧绘制 */
    function draw() {
        context.clearRect(0, 0, docWidth, docHeight)
        // 循环绘制点
        for (let i = 0; i < point; i++) {
            drawCircle(circleArr[i].x, circleArr[i].y, circleArr[i].r, circleArr[i].moveX, circleArr[i].moveY)
        }
        // 循环绘制线
        // for (let i = 0; i < point; i++) {
        //     for (let j = 0; j < point; j++) {
        //         if (i + j < point) {
        //             let A = Math.abs(circleArr[i + j].x - circleArr[i].x)
        //             let B = Math.abs(circleArr[i + j].y - circleArr[i].y)
        //             let lineLength = Math.sqrt(A * A + B * B)
        //             let C = 1 / lineLength * 7 - 0.009
        //             let lineOpacity = C > 0.03 ? 0.03 : C;
        //             if (lineOpacity > 0) {
        //                 drawLine(
        //                     circleArr[i].x,
        //                     circleArr[i].y,
        //                     circleArr[i + j].x,
        //                     circleArr[i + j].y,
        //                     lineOpacity,
        //                 )
        //             }
        //         }
        //     }
        // }
    }

    /** * 循环绘制 */
    function cycleDraw() {
        timer = setInterval(() => {
            for (let i = 0; i < point; i++) {
                let cir = circleArr[i]
                cir.x += cir.moveX
                cir.y += cir.moveY
                if (cir.x > docWidth) {
                    cir.x = 0
                } else if (cir.x < 0) {
                    cir.x = docWidth
                }
                if (cir.y > docHeight) {
                    cir.y = 0
                } else if (cir.y < 0) {
                    cir.y = docHeight
                }
            }
            draw()
            // console.log(111);
        }, 10)
    }

    (function run() {
        // 设置星星数组
        createCircleArr()       
    // 首屏绘制
        draw() 
        // 循环绘制
        cycleDraw()

        return timer
    })()

}





